import React, { Component,useState,useReducer } from 'react'
import "./less/login.less"
import { NavBar, InputItem, Button ,Toast} from 'antd-mobile';
import { Link } from "react-router-dom"
import { reqLogin } from '../../http/api';
import { initState,reducer,actions } from './user';

export default function Login(props) {
    // 初始化表单
    const [user, setUser] = useState({
        phone:"",
        password:""
    })
    const [state, dispatch] = useReducer(reducer, initState)

    // 做登录逻辑
    const doLogin=()=>{
        reqLogin(user).then(res=>{
            if(res.data.code===200){
                // 弹成功
                Toast.info(res.data.msg)
                // 存本地存储
                
                // 存仓库
                dispatch(actions.changeInfo(res.data.list))
                // 跳转页面
                props.history.push("/index/home")

            }
        })
    }
    return (
        <div className="nav">

                <NavBar>登录</NavBar>
                {JSON.stringify(user)}

                <InputItem
                    clear
                    placeholder="请输入账号"
                   onChange={(val) =>setUser({...user,phone:val})}

                >账号</InputItem>
                <InputItem
                    clear
                    placeholder="请输入密码"
                    type="password"
                    onChange={(val) =>setUser({...user,password:val})}

                >密码</InputItem>


                <div style={{ width: "33.33%", margin: "10px auto" }}>
                    <Button type="primary" 
                    onClick={() =>doLogin()}
                    >登录</Button>
                    </div>

               {/* <div>{JSON.stringify(user)}</div> */}
                <Link to="/register">没有账号，去注册</Link> 
            </div>
    )
}

